<template>
<div class="row border-bottom">
  <nav class="navbar navbar-static-top  " role="navigation" style="margin-bottom: 0">
    <!-- 菜单伸缩按钮 -->
    <div v-if="navbarHeaderFlag" class="navbar-header">
      <a class="navbar-minimalize minimalize-styl-2 btn btn-primary" v-on:click="navbarMinimalize">
        <i class="fa fa-bars"></i>
      </a>
    </div>
    <ul class="nav navbar-top-links navbar-right float-right margin-right-20px">
      <li class="dropdown" v-if="false">
        <a class="dropdown-toggle count-info" data-toggle="dropdown" href>
          <i class="fa fa-bell"></i>
          <span class="label label-primary">8</span>
        </a>
        <ul class="dropdown-menu dropdown-alerts">
          <li>
            <a href="mailbox.html">
              <div>
                <i class="fa fa-envelope fa-fw"></i>
                You have 16 messages
                <span class="pull-right text-muted small">4 minutes ago</span>
              </div>
            </a>
          </li>
          <li class="divider"></li>
          <li>
            <div class="text-center link-block">
              <a href="notifications.html">
                <strong>See All Alerts</strong>
                <i class="fa fa-angle-right"></i>
              </a>
            </div>
          </li>
        </ul>
      </li>
      <li class="dropdown">
        <a class="dropdown-toggle count-info" data-toggle="dropdown" href>
            <i class="fa fa-user"></i>
        </a>
        <ul class="dropdown-menu animated fadeInUp m-t-xs">
          <li>
            <router-link :to="{ name: 'changePassword' }">修改密码</router-link>
          </li>
          <li>
            <router-link :to="{ name: 'userDetail' }">我的信息</router-link>
          </li>
          <li class="divider"></li>
          <li>
            <a v-on:click='logout'>注销</a>
          </li>
        </ul>
      </li>
    </ul>
  </nav>
</div>

</template>

<script>
import cookie from '@/server/cookie.js'
import $ from 'jquery'
export default {
  data () {
    return {
      navbarHeaderFlag: true
    }
  },
  created () {
    const vue = this
    // 解决侧边滚动条
    // vue.fix_height();

    // 隐藏控制侧边菜单抽拉按钮
    if (vue.$route.name == 'home' || vue.$route.name == 'productNew' || vue.$route.name == 'productList' || vue.$route.name == 'courseDescription' || vue.$route.name == 'courseDescriptionAdd'|| vue.$route.name == 'courseDescriptionEdit' || vue.$route.name == 'courseDescriptionDetail' || vue.$route.name == 'userDetail' || vue.$route.name == 'userEdit' || vue.$route.name == 'changePassword') {
      vue.navbarHeaderFlag = false
    }
  },
  mounted () {
    const vue = this
    // 解决侧边滚动条
    vue.fix_height();
  },
  methods: {
    /* 登出功能 */
    logout: function() {
      cookie.delCookie('id')
      cookie.delCookie('name')
      cookie.delCookie('role')
      this.$router.push({ name: 'login'})
    },
    navbarMinimalize: function() {
        $("body").toggleClass("mini-navbar");
        SmoothlyMenu();
    },
    fix_height: function() {
      var heightWithoutNavbar = $("body > #wrapper").height() - 61;
      $(".sidebard-panel").css("min-height", heightWithoutNavbar + "px");
      var navbarHeigh = $('nav.navbar-default').height();
      var wrapperHeigh = $('#page-wrapper').height();
      if (navbarHeigh > wrapperHeigh) {
        $('#page-wrapper').css("min-height", navbarHeigh + "px");
      }
      // 没有侧边菜单的场合
      if (!navbarHeigh) {
        $('#page-wrapper').css("min-height", $(window).height() + "px");
      }
      if (navbarHeigh < wrapperHeigh) {
        $('#page-wrapper').css("min-height", $(window).height() + "px");
      }
      if ($('body').hasClass('fixed-nav')) {
        if (navbarHeigh > wrapperHeigh) {
          $('#page-wrapper').css("min-height", navbarHeigh - 60 + "px");
        } else {
          $('#page-wrapper').css("min-height", $(window).height() - 60 + "px");
        }
      }
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.float-right {
  float: right!important;
}
.navbar-right .dropdown-menu {
    right: 0;
    left: auto;
}
</style>
